/**@ 此组件只适合一般简单操作的表格页面 
 * 一旦特殊化的多页面 就可以考虑利用hook来简化操作了
 * 使用需要传入config对象
 @*/
<template>
	<div class="container-filled">
		<el-container>
			<el-main style="padding:0;">
				<!-- 展示表格 -->
				<el-table v-loading="loading" :data="filterTableData" v-if="filterTableData">
					<!-- 排序列目前只能实现头与尾位置 后续可以尝试利用slot插槽来实现固定位置 -->
					<el-table-column :prop="props.config.sort.sortKey" :label="props.config.sort.sortLabel" sortable
						v-if="props.config.sort.sortPlace === 1" />

					<!-- 循环输出列 -->
					<el-table-column v-for="item in props.config.TableColumns" :prop="item.prop" :label="item.label"
						:width="item.width" show-overflow-tooltip :default-sort="{ prop: props.config.sort.sortKey }" />

					<el-table-column :prop="props.config.sort.sortKey" :label="props.config.sort.sortLabel" sortable
						v-if="props.config.sort.sortPlace === 2" />
					<!-- 固定列 操作按钮 -->
					<el-table-column label="操作" fixed="right">
						<!-- 列头搜索框 -->
						<template #header>
							<el-input v-model="search" size="small" :placeholder="props.config.searchText" />
						</template>
						<template v-slot="scope" #default>
							<el-button v-for="item in props.config.operationBtns" :key="item" :type="item.type"
								:size="item.size" @click="item.fn(scope.row)" link>
								{{ item.title }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<!-- 分页模块 -->
			<el-footer>
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :total="total" :current-page="pageNum"
					:default-page-size="pageSize" style="margin:1em auto;" />
			</el-footer>
			<!-- 下载数据按钮 -->
			<el-button type="success" @click="serverDataToExcel" v-if="props.config.download">下载数据</el-button>
			<!-- 编辑框 -->
			<el-dialog v-model="props.config.isChange" title="更新列数据" width="40%" destroy-on-close center>
				<div>
					<!-- 绑定当前列数据 -->
					<el-form :model="props.config.nowRow" label-width="120px">
						<!-- 循环输出对应的输入框 -->
						<el-form-item v-for="item in props.config.TableColumns" :label="item.label">
							<el-input v-model="props.config.nowRow[item.prop]" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="props.config.isChange = false">取消</el-button>
						<el-button type="primary" @click="props.config.updata(props.config.nowRow)">
							更新
						</el-button>
					</span>
				</template>
			</el-dialog>
		</el-container>
	</div>
</template>

<script setup>
// 使用hook
import useList from "../hooks/useList"
const {
	loading,
	pageNum,
	pageSize,
	total,
	search,
	filterTableData,
	handleSizeChange,
	handleCurrentChange,
	serverDataToExcel
} = useList(props.config.requestUrl,
	props.config.searchKey,
	props.config.fliterFn,
	props.config.download?.url,
	props.config.download?.fileName)
const props = defineProps({
	config: Object
})

</script>

<style lang="scss" scoped>

</style>